<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px" class="itemForm">
      <el-form-item label="关卡">
        <el-input v-model="form.level" placeholder="请输入关卡" />
      </el-form-item>

      <el-form-item label="成语数">
        <el-input-number v-model="form.idiom" :min="3" :max="14" />
      </el-form-item>

      <el-form-item label="扣掉字数">
        <el-input-number v-model="form.take" :min="3" :max="21" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="find">查询</el-button>
        <el-button type="primary" @click="refresh">刷新</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>

    <div v-for="items in allItems" :key="items.i" class="allItems">
      <div v-for="(item, j) in items" :key="item.index" class="items">
        <el-card :class="items[j].itemClass" class="item">
          <div class="item-content">{{ item.content }}</div>
        </el-card>
      </div>
    </div>

    <br >
    <br >
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>成语详情</span>
      </div>
      <div v-for="item in list.idioms" :key="item.index" class="text itemIdiom">{{ item }}</div>
    </el-card>
  </div>
</template>

<script>
import { refresh, saveLevelConf, getLevelConf } from '@/api/level'

export default {
  name: 'Level',
  data() {
    return {
      form: {
        idiom: 5,
        take: 8,
        level: 1
      },
      list: {
        words: [],
        idioms: [],
        pos: [],
        answer: []
      },
      allItems: []
    }
  },
  methods: {

    find() {
      getLevelConf({
        level: this.form.level
      }).then(response => {
        this.list = response.data
        this.renderItems()
      })
    },

    refresh() {
      refresh({
        idiom: this.form.idiom,
        level: this.form.level,
        take: this.form.take
      }).then(response => {
        this.list = response.data
        this.renderItems()
      })
    },

    renderItems() {
      this.allItems = new Array(9) // 表格有9行
      for (var i = 0; i < 9; i++) {
        this.allItems[i] = new Array(9)
        for (var j = 0; j < 9; j++) {
          console.log(i, j)
          this.allItems[i][j] = {
            itemClass: 'none',
            content: ''
          }
        }
      }
      for (let index = 0; index < this.list.pos.length; index++) {
        const item = this.list.pos[index]
        const x = Math.floor(item / 9)
        const y = item % 9
        this.allItems[x][y] = {
          itemClass: 'show',
          content: this.list.words[index]
        }
        for (let z = 0; z < this.list.answer.length; z++) {
          const answer = this.list.answer[z]
          if (answer === index) {
            this.allItems[x][y] = {
              itemClass: 'hide',
              content: ''
            }
          }
        }
      }

      console.log(this.allItems)
      this.$forceUpdate()
    },

    save() {
      saveLevelConf({
        level: this.form.level,
        content: JSON.stringify(this.list)
      }).then(response => {
        this.$message('保存成功!')
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.itemForm {
  margin: 30px;
  width: 800px;
}

.allItems {
  width: 800px;
  height: 48px;
}

.items {
  margin: 20px;
}

.item {
  float: left;
  margin: 2px;
}

.item-content {
  display: block;
  width: 16px;
  height: 16px;
}

.none {
  border: 1px solid #ebeef5;
}

.show {
  background-color: burlywood;
}

.hide {
  background-color: burlywood;
}

.text {
  font-size: 14px;
}

.itemIdiom {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin-left: 30px;
  width: 480px;
}
</style>
